﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Reporting.aspx.cs" Inherits="Reservoir.WebSite.Reporting" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>报备页</title>
    <link href="Content/mui/css/mui.min.css" rel="stylesheet" />
    <link href="Content/mui/css/app.css" rel="stylesheet" />
    <link href="Content/mui/css/mui.picker.css" rel="stylesheet" />
    <link href="Content/mui/css/mui.poppicker.css" rel="stylesheet" />
    <link href="Content/personaleidt.css" rel="stylesheet" />
    <link href="Content/common.css" rel="stylesheet" />
    <style>
        .div_dv1 {
            background-color: antiquewhite;
            height: 40px;
            text-align: center;
        }

            .div_dv1 p {
                margin-top: 10px;
                margin-left: 25px;
                float: left;
                font-size: 30px;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="div_dv1">
            <p>工号：<asp:Label ID="lblUserId" runat="server" Text=""></asp:Label></p>
            <p>姓名：<asp:Label ID="lblName" runat="server" Text=""></asp:Label></p>
        </div>

        <div class="mui-input-row">
            <label>所在地</label>
            <div id='cityResult' class="ui-alert"></div>
            <asp:HiddenField ID="hidAddress" runat="server" />
        </div>
        <div class="mui-input-row">
            <label>水库名称</label>
            <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        </div>
        <div class="mui-input-row">
            <label>水域面积(公里²)</label>
            <asp:TextBox ID="txtArea" runat="server"></asp:TextBox>
        </div>
        <div class="mui-input-row">
            <label>蓄水量(亿 m³)</label>
            <asp:TextBox ID="txtStorage" runat="server"></asp:TextBox>
        </div>
        <div class="mui-input-block" style="height: 220px;">
            <label style="margin-left: 14px;">功能</label>
            <div>
                <input type="checkbox" value="饮用水源" id="Basketball" />
                <label for="Basketball">饮用水源</label>
                <br />
                <input type="checkbox" value="风景区" id="Running" />
                <label for="Running">风景区</label>
                <br />
                <input type="checkbox" value="农业用水" id="Film" />
                <label for="Film">农业用水</label>
                <br />
                <input type="checkbox" value="渔业用水" id="Piano" />
                <label for="Piano">渔业用水</label>
                <br />
                <input type="checkbox" value="景观用水" id="Game" />
                <label for="Game">景观用水</label>
            </div>
            <asp:HiddenField ID="Functional" runat="server" />
        </div>
        <div class="mui-input-row">
            <label>最高水位(m)</label>
            <asp:TextBox ID="txtMaximum" runat="server"></asp:TextBox>
        </div>
        <div class="mui-input-row">
            <label>当前水位(m)</label>
            <asp:TextBox ID="txtCurent" runat="server"></asp:TextBox>
        </div>
        <div class="mui-input-row">
            <label>备注</label>
            <asp:TextBox ID="txtRemarks" runat="server"></asp:TextBox>
        </div>
        <div>
            <asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSave_Click" />
        </div>
    </form>
    <script src="scripts/jquery-1.8.3.min.js"></script>
    <script src="Content/mui/js/mui.js"></script>
    <script src="Content/mui/js/mui.picker.js"></script>
    <script src="Content/mui/js/mui.poppicker.js"></script>
    <script src="Content/mui/js/city.data.js"></script>
    <script>
        (function ($, doc) {
            $.init();
            $.ready(function () {

                //级联示例
                var cityPicker = new $.PopPicker({
                    layer: 2
                });
                cityPicker.setData(cityData);
                var showCityPickerButton = doc.getElementById('cityResult');
                var cityResult = doc.getElementById('cityResult');
                if (doc.getElementById('hidAddress').value != "") {
                    cityResult.innerText = doc.getElementById('hidAddress').value;
                } else {
                    cityResult.innerText = "请选择";
                }

                showCityPickerButton.addEventListener('tap', function (event) {
                    //显示用户地址
                    var address = doc.getElementById('hidAddress').value;
                    if (address != "") {
                        var arr = address.split(',');
                        var city = arr[0];//城市
                        var region = arr[1];//区域
                        for (var n = 0; n < cityData.length; n++) {
                            if (cityData[n].text == city) {
                                //设置城市选中
                                cityPicker.pickers[0].setSelectedIndex(n);
                                for (var i = 0; i < cityData[n].children.length; i++) {
                                    if (cityData[n].children[i].text == region) {
                                        //设置区域选中
                                        cityPicker.pickers[1].setSelectedIndex(i);
                                    }
                                }
                            }
                        }
                    }


                    cityPicker.show(function (items) {

                        cityResult.innerText = items[0].text + " " + items[1].text;
                        doc.getElementById('hidAddress').value = items[0].text + "," + items[1].text;

                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }, false);

            });
        })(mui, document);
</script>
    <script>

        $(function () {

            //显示爱好
            var arr = $("#Functional").val().split(",");
            $("input[type=checkbox]").each(function () {
                if ($.inArray($(this).val(), arr) >= 0) {
                    $(this).attr("checked", true);
                }
            });


            $("#btnSubmit").click(function () {
                var hobby = [];
                $("input[type=checkbox]:checked").each(function () {
                    hobby.push($(this).val());
                    $("#Functional").val(hobby);
                });
            });

        })
    </script>
</body>
</html>
